diff --git a/static/css/style.less b/static/css/style.less
index 904ef63..32bb0bb 100644
--- a/static/css/style.less
+++ b/static/css/style.less
@@ -68,27 +68,37 @@
     }
 
     p {
-      margin: 0 0 15px 0;
+      margin: 0px;
       font-size: 14px;
     }
 
+    i {
+      width: 30px;
+      text-align: center;
+      vertical-align: middle;
+    }
+
+    div.social {
+      margin-top:15px;
+
+      a {
+        display: inline-block;
+        height: 30px;
+      }
+    }
+
     ul {
-      margin: 20px 0 0 0;
-      padding-left: 0;
+      margin: 0px;
+      padding-left: 0px;
       font-size: 16px;
       list-style-type: none;
 
       li {
-        display: block;
         line-height: 2em;
 
         a {
           i {
               padding-left: 5px;
-              color: @black;
-              width: 30px;
-              text-align: center;
-              vertical-align: middle;
           }
         }
       }
diff --git a/templates/base.html b/templates/base.html
index 6fc27ed..4003e03 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -40,6 +40,54 @@
   {% include "modules/analytics.html" %}
 </head>
 
+{% macro get_icon(link) %}
+  {%- set class = 'fa-external-link-square' -%}
+
+  {# Attempt to normalize link URLs #}
+  {%- set temp = link|lower|replace('http://', '')|replace('https://', '')|replace('www.', '') -%}
+
+  {# Choosing a specific link icon #}
+  {%-  if temp.startswith('bitcoin:') %}{% set class = 'fa-btc' %}
+  {% elif temp.startswith('irc:') %}{% set class = 'fa-comments' %}
+  {% elif temp.startswith('mailto:') %}{% set class = 'fa-envelope' %}
+  {% elif temp.startswith('skype:') %}{% set class = 'fa-skype' -%}
+
+  {%- elif temp.endswith('.pdf') or
+           temp.endswith('.txt') or
+           temp.endswith('.doc') or
+           temp.endswith('.docx') %}{% set class = 'fa-file-text' -%}
+
+  {%- elif temp.startswith('bitbucket.org') %}{% set class = 'fa-bitbucket' %}
+  {% elif temp.startswith('delicious.com') %}{% set class = 'fa-delicious' %}
+  {% elif temp.startswith('deviantart.com') %}{% set class = 'fa-deviantart' %}
+  {% elif temp.startswith('facebook.com') %}{% set class = 'fa-facebook' %}
+  {% elif temp.startswith('flickr.com') %}{% set class = 'fa-flickr' %}
+  {% elif temp.startswith('foursquare.com') %}{% set class = 'fa-foursquare' %}
+  {% elif temp.startswith('github.com') %}{% set class = 'fa-github' %}
+  {% elif temp.startswith('instagram.com') %}{% set class = 'fa-instagram' %}
+  {% elif temp.startswith('last.fm') %}{% set class = 'fa-lastfm' %}
+  {% elif temp.startswith('linkedin.com') %}{% set class = 'fa-linkedin' %}
+  {% elif temp.startswith('news.ycombinator.com') %}{% set class = 'fa-hacker-news' %}
+  {% elif temp.startswith('pinterest.com') %}{% set class = 'fa-pinterest' %}
+  {% elif temp.startswith('plus.google.com') %}{% set class = 'fa-google-plus' %}
+  {% elif temp.startswith('reddit.com') %}{% set class = 'fa-reddit' %}
+  {% elif temp.startswith('spotify.com') %}{% set class = 'fa-spotify' %}
+  {% elif temp.startswith('stackoverflow.com') %}{% set class = 'fa-stack-overflow' %}
+  {% elif temp.startswith('steamcommunity.com') %}{% set class = 'fa-steam' %}
+  {% elif temp.startswith('soundcloud.com') %}{% set class = 'fa-soundcloud' %}
+  {% elif temp.startswith('twitch.tv') %}{% set class = 'fa-twitch' %}
+  {% elif temp.startswith('twitter.com') %}{% set class = 'fa-twitter' %}
+  {% elif temp.startswith('vimeo.com') %}{% set class = 'fa-vimeo-square' %}
+  {% elif temp.startswith('vine.co') %}{% set class = 'fa-vine' %}
+  {% elif temp.startswith('youtube.com') %}{% set class = 'fa-youtube' -%}
+
+  {%- elif '.stackexchange.com' in temp %}{% set class = 'fa-stack-exchange' %}
+  {% elif '.tumblr.com' in temp %}{% set class = 'fa-tumblr' %}
+  {% endif -%}
+
+  <i class="fa {{ class }} fa-lg"></i>
+{%- endmacro -%}
+
 <body>
   <aside>
     <div id="user_meta">
@@ -50,65 +98,18 @@
       </a>
       <h2><a href="{{ SITEURL }}" class="nohover">{{ SITENAME }}</a></h2>
       <p>{{ TAGLINE }}</p>
-      <ul>
+      <div class="social">
         {% for name, link in SOCIAL %}
-
-        {# Attempt to normalize link URLs #}
-        {% set temp = link|lower|replace('http://', '')|replace('https://', '')|replace('www.', '') %}
-
-        {% set class = 'fa-external-link-square' %}
-
-        {% if MANGLE_EMAILS and temp.startswith('mailto:') %}
-        <li><a data-email="{{ link|reverse }}" title="You need javascript enabled to view this email" class="email">{{ name }}<i class="fa fa-envelope fa-lg"></i></a></li>
+        {% if MANGLE_EMAILS and link.startswith('mailto:') %}
+        <a data-email="{{ link|reverse }}" data-title="{{ name }}" title="You need javascript enabled to view this email" class="email">{{ get_icon(link) }}</a>
         {% else %}
-
-        {# Choosing a specific link icon #}
-        {%   if temp.startswith('bitcoin:') %}{% set class = 'fa-btc' %}
-        {% elif temp.startswith('irc:') %}{% set class = 'fa-comments' %}
-        {% elif temp.startswith('mailto:') %}{% set class = 'fa-envelope' %}
-        {% elif temp.startswith('skype:') %}{% set class = 'fa-skype' %}
-
-        {% elif temp.endswith('.pdf') or
-                temp.endswith('.txt') or
-                temp.endswith('.doc') or
-                temp.endswith('.docx') %}{% set class = 'fa-file-text' %}
-
-        {% elif temp.startswith('bitbucket.org') %}{% set class = 'fa-bitbucket' %}
-        {% elif temp.startswith('delicious.com') %}{% set class = 'fa-delicious' %}
-        {% elif temp.startswith('deviantart.com') %}{% set class = 'fa-deviantart' %}
-        {% elif temp.startswith('facebook.com') %}{% set class = 'fa-facebook' %}
-        {% elif temp.startswith('flickr.com') %}{% set class = 'fa-flickr' %}
-        {% elif temp.startswith('foursquare.com') %}{% set class = 'fa-foursquare' %}
-        {% elif temp.startswith('github.com') %}{% set class = 'fa-github' %}
-        {% elif temp.startswith('instagram.com') %}{% set class = 'fa-instagram' %}
-        {% elif temp.startswith('last.fm') %}{% set class = 'fa-lastfm' %}
-        {% elif temp.startswith('linkedin.com') %}{% set class = 'fa-linkedin' %}
-        {% elif temp.startswith('news.ycombinator.com') %}{% set class = 'fa-hacker-news' %}
-        {% elif temp.startswith('pinterest.com') %}{% set class = 'fa-pinterest' %}
-        {% elif temp.startswith('plus.google.com') %}{% set class = 'fa-google-plus' %}
-        {% elif temp.startswith('reddit.com') %}{% set class = 'fa-reddit' %}
-        {% elif temp.startswith('spotify.com') %}{% set class = 'fa-spotify' %}
-        {% elif temp.startswith('stackoverflow.com') %}{% set class = 'fa-stack-overflow' %}
-        {% elif temp.startswith('steamcommunity.com') %}{% set class = 'fa-steam' %}
-        {% elif temp.startswith('soundcloud.com') %}{% set class = 'fa-soundcloud' %}
-        {% elif temp.startswith('twitch.tv') %}{% set class = 'fa-twitch' %}
-        {% elif temp.startswith('twitter.com') %}{% set class = 'fa-twitter' %}
-        {% elif temp.startswith('vimeo.com') %}{% set class = 'fa-vimeo-square' %}
-        {% elif temp.startswith('vine.co') %}{% set class = 'fa-vine' %}
-        {% elif temp.startswith('youtube.com') %}{% set class = 'fa-youtube' %}
-
-        {% elif '.stackexchange.com' in temp %}{% set class = 'fa-stack-exchange' %}
-        {% elif '.tumblr.com' in temp %}{% set class = 'fa-tumblr' %}
-
-        {% endif %}
-
-        <li><a href="{{ link }}">{{ name }}<i class="fa {{ class }} fa-lg"></i></a></li>
+        <a href="{{ link }}" title="{{ name }}">{{ get_icon(link) }}</a>
         {% endif %}
         {% endfor %}
-      </ul>
+      </div>
       <ul>
         {% for name, link in LINKS %}
-        <li><a href="{{ link }}">{{ name }}<i class="fa fa-external-link-square fa-lg"></i></a></li>
+        <li><a href="{{ link }}">{{ name }}{{ get_icon(link) }}</a></li>
         {% endfor %}
       </ul>
     </div>
@@ -164,10 +165,12 @@
       var e = document.querySelectorAll(".email");
       for (var i = 0; i < e.length; i++) {
         var email = e[i].getAttribute("data-email")
+        var title = e[i].getAttribute("data-title") || "Email"
         if (email){
           e[i].href = email.split("").reverse().join("");
+          e[i].setAttribute("title", title);
           e[i].removeAttribute("data-email");
-          e[i].removeAttribute("title");
+          e[i].removeAttribute("data-title");
           e[i].removeAttribute("class");
         }
       }